@tailwind base;
@tailwind components;
@tailwind utilities;
@import './expandTailwindcss';
@import '_mixin.scss';
html,
body,
#app {
  @apply min-h-full bg-main-bg text-main-text dark:bg-main-bg-dark dark:text-main-text-dark;
  @include scroll(5px);
}

#app {
  position: relative;
}

* {
  @apply transition-all;
}

.el-form-item--large {
  margin-bottom: 32px !important;
}
.el-checkbox.el-checkbox--large {
  height: 28px !important;
}

.dark {
  canvas {
    background-image: none;
    background-color: rgba(5, 5, 5, 0.7);
  }
}

.dataShowPaneItem {
  canvas {
    @apply rounded-lg hover:shadow-lg hover:-translate-y-0.5 z-10;
  }
  canvas {
    background-image: linear-gradient(180deg, rgba(219, 234, 254, 0), rgba(219, 234, 254, 0.5));
  }
}
